<template>
  <div class="carouselEcharts">
    <!-- <el-carousel
      :interval="5000"
      arrow="always"
      :autoplay="false"
      indicator-position="none"
      ref="carousel"
    >
      <el-carousel-item v-for="item in 2" :key="item"> -->
    <!-- <div class="customizeCarouselBtn" @click="handelPrev">
          <img :src="require('@/assets/images/carouselLeft.png')" />
        </div>
        <div class="customizeCarouselBtn rightBtn" @click="handelNext">
          <img :src="require('@/assets/images/carouselRight.png')" />
        </div> -->
    <echartsLine
      :echartsName="echartsName"
      :taskCount="taskCount"
      :scoreCount="scoreCount"
      :start="0"
      :end="40"
      @handelFullScreen="handelFullScreen"
      :width="width"
      :height="height"
    />
    <!-- <div class="fullScreenAndnarrow">
      <div class="btnBox" @click="handelFullScreen">
        <img :src="require('@/assets/images/fullIcon.png')" />
      </div>
    </div> -->
    <!-- </el-carousel-item>
    </el-carousel> -->
    <el-dialog :visible.sync="dialogVisible" :fullscreen="true" append-to-body>
      <div class="fullScreenEcharts" v-if="dialogVisible">
        <!-- <el-carousel
          :interval="5000"
          arrow="always"
          :autoplay="false"
          indicator-position="none"
          ref="carousel-dialog"
        >
          <el-carousel-item v-for="item in 1" :key="item"> -->
        <!-- <div class="customizeCarouselBtn" @click="handelDialogPrev">
              <img :src="require('@/assets/images/carouselLeft.png')" />
            </div>
            <div
              class="customizeCarouselBtn rightBtn"
              @click="handelDialogNext"
            >
              <img :src="require('@/assets/images/carouselRight.png')" />
            </div> -->
        <echartsLine
          :taskCount="dtaskCount"
          :scoreCount="dscoreCount"
          :echartsName="`${echartsName}-dialog-1`"
          :exitFullScreen="dialogVisible"
          @exitFullScreen="exitFullScreen"
          :start="0"
          :end="40"
          :key="2"
          :width="width"
          :height="height"
        />
        <!-- </el-carousel-item>
        </el-carousel> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echartsLine from "@/components/echarts/echartsLine";
export default {
  components: {
    echartsLine,
  },
  data() {
    return {
      dialogVisible: false,
      dtaskCount: [], // 弹出框内的图表数据
      dscoreCount: {}, // 弹出框内的图表数据
    };
  },
  props: {
    taskCount: Array,
    scoreCount: Object,
    width: String,
    height: String,
    echartsName: {
      type: String,
      default: function () {
        return 'echartsLine-1'
      }
    }
  },
  watch: {
    taskCount(n, o) {
      this.dtaskCount = n;
    },
    scoreCount(n, o) {
      this.dscoreCount = n;
    },
  },
  methods: {
    handelPrev() {
      this.$refs.carousel.prev();
    },
    handelNext() {
      this.$refs.carousel.next();
    },
    // 全屏轮播
    handelDialogPrev() {
      this.$refs["carousel-dialog"].prev();
    },
    // 全屏轮播
    handelDialogNext() {
      this.$refs["carousel-dialog"].next();
    },
    // 点击全屏
    handelFullScreen() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.dtaskCount = JSON.parse(JSON.stringify(this.taskCount));
        this.dscoreCount = JSON.parse(JSON.stringify(this.scoreCount));
      });
    },
    // 退出全屏
    exitFullScreen() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="stylus">
.carouselEcharts {
  margin-top: 30px;
  background-color: #ffffff;
  box-shadow: 0px 8px 16px 0px rgba(7, 23, 39, 0.1);
  border-radius: 18px;

  .echartsBar {
    padding-bottom: 60px;
  }

  .el-dialog__wrapper {
    .el-dialog {
      .el-dialog__header {
        padding: 0;
      }

      .el-dialog__body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        height: 100%;

        .fullScreenEcharts {
          width: 100vw;
          height: 550px;
        }
      }
    }
  }

  .fullScreenAndnarrow {
    padding: 19px 40px 0 0;
    height: 103px;

    .btnBox {
      float: right;
      cursor: pointer;
      display: inline-block;
      width: 45px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      background-color: #003262;
      border-radius: 5px;

      img {
        object-fit: cover;
      }
    }
  }
}
</style>